import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  ViewChildren,
  QueryList,
} from '@angular/core';
import {ProductlistService} from './list/productlist.service';
import {ProductService} from './product.service';
import {Router, ActivatedRoute, ParamMap, NavigationEnd} from '@angular/router';
import 'rxjs/add/operator/switchMap';
import {NzModalService, NzMessageService} from 'ng-zorro-antd';
import {AdOssUploadService} from '../../lib/service/ad-oss-upload.service';
import {LocalStorageService} from '../../lib/service/local-storage.service';

@Component({
  selector: 'app-product-page',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss'],
  providers: [ProductlistService, ProductService, AdOssUploadService, LocalStorageService]
})

export class ProductComponent implements OnInit {
  typeOpen = true;
  addshow = false;
  typeValue = '';
  isCollapsed = false;
  sliderWidth = 180;
  groupList = [];
  @ViewChildren('editInput')
  childCmps: QueryList<ElementRef>;
  @ViewChild('InputFocus')
  childCmps1: ElementRef;
  shopid: any;
  classType: 'right-circle';
  sort = 1;

  addInput(e) {
    e.stopPropagation();
    this.addshow = true;
    this.typeOpen = true;
  }

  toggleCollapsed(value) {
    this.isCollapsed = value;
    if (!this.isCollapsed) {
      this.typeOpen = true;
    }
    //this.sliderWidth = this.isCollapsed ? 64 : 200;
  }

  pickDown(item) {
    item.pickDown = !item.pickDown;
  }

  addType(item?) {
    if (item == null) {
      item = {};
    }
    if (this.typeValue) {
      this.addTypeValue();
    } else {
      this.addshow = false;
    }
  }

  stop(e) {
    e.stopPropagation();
  }

  prevent(e) {
    e.preventDefault();
  }

  valueDelete1(e) {
    this.typeValue = '';
    e.preventDefault();
  }

  valueDelete(e) {
    e.preventDefault();
    this.typeValue = '';
    // this.childCmps1.nativeElement.focus();
  }

  saveType(item) {
    console.log('item', item);
    if (this.typeValue && this.typeValue != item.name) {
      this.saveTypeValue(item);
    } else {
      item.edit = false;
      item.additem = false;
      this.typeValue = '';
    }
  }

  saveTypeValue(item) {
    this.ProductlistService.editGroup({
      name: this.typeValue,
      id: item.id,
      pid: 0,
      shop_id: this.shopid,
      sort:item.sort
    }).subscribe(res => {
      if (res.code === 200) {
        item.name = this.typeValue;
        this.typeValue = '';
        item.edit = false;
        this._message.create('success', '分类修改成功');
      } else {
        this._message.create('error', res.message);
      }

    });
  }

  typeEdit(e, item) {
    e.stopPropagation();
    item.edit = true;
    item.typeValue = item.name;
  }

  addItem(e, item) {
    e.stopPropagation();
    item.additem = true;
    item.typeValue = item.name;
  }

  noOpen() {
    console.log(this.typeOpen);
    this.typeOpen = true;
    return false;
  }

  addTypeValue(item?) {
    let data = {name: this.typeValue, pid: 0, shop_id: this.shopid, sort: this.sort};
    if (item) {
      data.pid = item.id;
    }
    this.ProductlistService.postAddGroup(data).subscribe(res => {
      if (res.code === 200) {
        this.typeValue = '';
        this.addshow = false;
        this.getGroupList();
        this._message.create('success', '分类添加成功');
      } else {
        this._message.create('error', res.message);
      }

    });
  }

  constructor(public ProductlistService: ProductlistService,
              private route: ActivatedRoute,
              private _message: NzMessageService,
              private confirmServ: NzModalService,
              private _router: Router,
              private localStorageService: LocalStorageService) {
    this._router.events
      .filter((event) => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        if (this.shopid != this.localStorageService.getShop()['id']) {
          this.shopid = this.localStorageService.getShop()['id'];
          this.getGroupList();
        }
      });

  }

  ngOnInit() {
    // this.shopid = this.localStorageService.getShop()['id'];
    // this.getGroupList();
    // this.shopid = this.localStorageService.getShop()['id'];
    // if (Object.keys(this.route.queryParams['_value']).length) {
    //   this.route.queryParams.subscribe(params => {
    //     console.log('product-shopid', params.id);
    //     this.shopid = params.id;
    //     this.getGroupList();
    //   });
    // }else {
    //   console.log('product-shopid2', this.shopid.id);
    //   this.shopid = this.localStorageService.getShop()['id'];
    //   this.getGroupList();
    // }
  }

  getGroupList() {// 获取分组
    this.ProductlistService.getGroupList(this.shopid).subscribe(res => {
      if (res.code === 200) {
        this.groupList = res.data.list;
      }
    });
  }

  typeDel(e, item) {
    e.stopPropagation();
    this.confirmServ.confirm({
      title: '删除分类',
      content: '您确定要删除 `' + item.name + '` 分类吗？',
      showConfirmLoading: true,
      onOk: () => {
        return new Promise((resolve) => {
          this.ProductlistService.delGroup(item.id, this.shopid).subscribe(res => {
            if (res.code === 200) {
              this._message.create('success', '分类删除成功');
              if (this.ProductlistService.type2 === item.id) {
                this._router.navigateByUrl('/member/product/list/' + this.ProductlistService.type1);
              }
              this.getGroupList();
              resolve();
            } else {
              this._message.create('error', res.message);
            }
          })
        });
      },
      onCancel() {

      }
    });

  }

}
